<#macro layout>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title></title>
	<link href="${ctx}/static/assets/css/bootstrap.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="${ctx}/static/assets/css/font-awesome.min.css" />
	<link rel="stylesheet" href="${ctx}/static/assets/css/ace.min.css" />
<script src='${ctx}/static/jquery/1.8.3/jquery.js'
	type='text/javascript'></script>
<link href="${ctx}/cy/css/editpage.css" rel="stylesheet">
<link href="${ctx}/cy/css/fp-web-setting.css" rel="stylesheet">
 <link rel="stylesheet" href="${ctx}/static/kindeditor/themes/default/default.css" />
    <script charset="utf-8" src="${ctx}/static/kindeditor/kindeditor-min.js"></script>
    <script charset="utf-8" src="${ctx}/static/kindeditor/lang/zh_CN.js"></script>
    <script charset="utf-8" src="${ctx}/static/kindeditor/plugins/code/prettify.js"></script>
	<!-- page specific plugin styles -->
	<!-- ace styles -->



</head>
<#nested>
</#macro> <@layout>
<body>
	</br>
	</br>
	<form method="post"></form>
	<div class="edit-page-left">
		<div class="edit-page-left-top"></div>
		<ul class="thumbnail-page-list ui-sortable" id="imgui">
		<#list sxlist as m>
		<li class="page-list show " id='li${(m.id)}'  style="cursor: pointer;"  onclick="seleli(this,'${(m.id)}')">
		<div class="thumbnail-page-list-item-num edit-page-icon">
		<span>${(m_index+1)}</span></div>
		<div class="delete-btn edit-page-icon" style="cursor: pointer;"  onclick="delli('${(m.id)}')"></div>
		<div class="page animation-prepare"'
			style="pointer-events: none; position: relative; width: 320px; height: 504px;'
							background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;">
		<img  id='imgs${(m.id)}'   src="${ctx}${(m.url)}" 
		style="position: absolute;height:100%; width: 320px; left: 0px; top: 0px;">
		</li>
		</#list>
		</ul>
		<div class="loading-icon edit-page-icon"></div>
	</div>
	<div class="edit-page-right">
		<div class="edit-page-phone">
			<div class="edit-page-phone-content-border" id="editview">
				<div class="edit-page-theme-title">
				<#list  list as m>${(m.mbmc)!} </#list></div>
				<input type="hidden" name="bs" id="bs">
				<div class="edit-page-phone-screen" onclick="addtextdiv();">
					<div class="page animation-prepare"
						style="pointer-events: none; position: relative; width: 320px; height: 504px; background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;">
						<div class="layout-component-from-data"
							style="background-color: white; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px) scale(1) rotateZ(0rad); opacity: 1; z-index: 0; position: absolute; left: 0px; top: 0px; width: 320px; height: 504px;">
							<span id="imgspan"  class="layout-component-from-data" 
								style="line-height: 27px; font-size: 27px;
								text-align: center; width: 320px;white-space: nowrap;
								opacity: 1; z-index: 2;position: absolute; left: 0px;height:0px"></span>
							<img id="viewimg" src="">
						</div>
					</div>
				</div>
				<div class="loading-icon edit-page-icon"></div>
			</div>
			<div class="edit-page-preview edit-page-icon" onclick="viewpage()"></div>
		</div>
		<!--添加新页面按钮-->
		<div class="edit-page-add-page-btn edit-page-icon"
			style="cursor: pointer;" onclick="addpage();"></div>
		<!--添加新组建按钮-->
		<div class="edit-page-add-module-btn edit-page-icon hide"></div>

		
		<!--主題设置按钮-->
		<div class="edit-page-theme-setting-btn" onclick="selectnr()">
			<img src="${ctx}/cy/img/edit-page-theme-setting-geer-word.png"
				class="edit-page-theme-setting-word"> <img
				src="${ctx}/cy/img/edit-page-theme-setting-geer.png"
				class="edit-page-theme-setting-geer">
		</div>
		<!--音乐设置按钮-->
		<div class="edit-page-music-setting-btn" onclick="selectmusic()">
			<img src="${ctx}/cy/img/edit-page-theme-setting-music-word.png"
				class="edit-page-theme-setting-music-word"> <img
				src="${ctx}/cy/img/edit-page-theme-setting-music.png"
				class="edit-page-theme-setting-music">
		</div>

		<!--添加页面的配置页-->
		<div class="edit-page-add-page-setting-page hide">
			<div class="close-add-page-setting-page-btn2"></div>
			<div class="close-add-page-setting-page-btn edit-page-icon"
				style="cursor: pointer;" onclick="delpage()"></div>
			<div class="edit-add-page-template-wall">
				<div class="template-item-border">
					<div class="template-thumbnail " onclick="template(this,'1')"
						style="background-image: url(${ctx}/cy/img/1.jpg); background-size: cover; cursor: pointer; background-position: initial initial; background-repeat: initial initial;">
						<div class="select-flag edit-page-icon"></div>
					</div>
					<div class="template-description">单图</div>
				</div>
				<div class="template-item-border">
					<div class="template-thumbnail" onclick="template(this,'2')"
						style="background-image: url(${ctx}/cy/img/2.jpg); background-size: cover; cursor: pointer; background-position: initial initial; background-repeat: initial initial;">
						<div class="select-flag edit-page-icon"></div>
					</div>
					<div class="template-description">上图下文</div>
				</div>
				<div class="template-item-border">
					<div class="template-thumbnail" onclick="template(this,'3')"
						style="background-image: url(${ctx}/cy/img/3.jpg); background-size: cover; cursor: pointer; background-position: initial initial; background-repeat: initial initial;">
						<div class="select-flag edit-page-icon"></div>
					</div>
					<div class="template-description">文字封腰</div>
				</div>
				<div class="template-item-border">
					<div class="template-thumbnail" onclick="template(this,'4')"
						style="background-image: url(${ctx}/cy/img/4.jpg); background-size: cover; cursor: pointer; background-position: initial initial; background-repeat: initial initial;">
						<div class="select-flag edit-page-icon"></div>
					</div>
					<div class="template-description">上文下图</div>
				</div>
				<div class="template-item-border">
					<div class="template-thumbnail " onclick="template(this,'5')"
						style="background-image: url(${ctx}/cy/img/5.jpg); background-size: cover; cursor: pointer; background-position: initial initial; background-repeat: initial initial;">
						<div class="select-flag edit-page-icon"></div>
					</div>
					<div class="template-description">粗黑文字</div>
				</div>
			</div>

			<div class="edit-add-page-btn" style="cursor: pointer;"
				onclick="makeSureBtn()">确认</div>
		</div>

		<!--下滑页,之所以添加这个border，是为了所有的下滑页面都能完全从底下滑出来，但是右侧不会露出，这是因为border添加了overflow:hidden-->
		<div class="edit-page-slide-page-border slide-out " id="divborder">
			<!--图片组件编辑页-->
			
			<!--编辑文字-->
			<div class="slide-page-edit-word slide-page " id="textdiv">
				<div class="edit-word-mask"></div>
				<!--关闭页面按钮-->
				<div class="close-edit-word-page-btn  edit-page-icon"
					onclick="removetextdiv()"></div>
				<!--编辑文本内容-->
				<div class="edit-word-text-border " id="wbtext">
					<textarea class="edit-word-text" id="nrtext" maxlength="200" onblur="changetext()"></textarea>
					<span class="edit-text-word-count">200</span>
				</div>
				<!--编辑颜色-->
				<div class="edit-word-color-border" style="height:300px;white-space:nowrap;">
				<div style="white-space:nowrap;">
				字体大小<input type="text" name="styles" id="styles" style="width:80px"  onblur="changetextpx()"> px
				<div class="dropdown dropdown-colorpicker">颜色
	<a data-toggle="dropdown" class="dropdown-toggle" > 
	<span class="btn-colorpicker" id="colorspan" style="background-color: #000000;"></span></a>
	<ul class="dropdown-menu dropdown-caret"   >
		<li><a class="colorpick-btn" href="#"
			style="background-color: #ac725e;" data-color="#ac725e"> </a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #d06b64;" data-color="#d06b64"> </a></li>
		<li><a class="colorpick-btn " href="#"
			style="background-color: #f83a22;" data-color="#f83a22"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #fa573c;" data-color="#fa573c"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #ff7537;" data-color="#ff7537"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #ffad46;" data-color="#ffad46"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #42d692;" data-color="#42d692"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #16a765;" data-color="#16a765"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #7bd148;" data-color="#7bd148"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #b3dc6c;" data-color="#b3dc6c"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #fbe983;" data-color="#fbe983"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #fad165;" data-color="#fad165"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #92e1c0;" data-color="#92e1c0"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #9fe1e7;" data-color="#9fe1e7"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #9fc6e7;" data-color="#9fc6e7"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #4986e7;" data-color="#4986e7"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #9a9cff;" data-color="#9a9cff"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #b99aff;" data-color="#b99aff"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #c2c2c2;" data-color="#c2c2c2"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #cabdbf;" data-color="#cabdbf"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #cca6ac;" data-color="#cca6ac"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #FFFFFF;" data-color="#FFFFFF"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #cd74e6;" data-color="#cd74e6"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #a47ae2;" data-color="#a47ae2"></a></li>
		<li><a class="colorpick-btn" href="#"
			style="background-color: #555;" data-color="#555"></a></li>
				<li><a class="colorpick-btn selected" href="#"
			style="background-color: #000000;" data-color="#000000"></a></li>
				<li><a class="colorpick-btn" href="#"
			style="background-color: #f691b2;" data-color="#f691b2"></a></li>
	</ul>
</div></div>

				</div>	
				<!--编辑图片-->
				<div class="edit-font-family-border">
				<div style="width: 250px; white-space:nowrap;">
					<button  class="btn-info " id="image1">选择图片</button>
					<input type="hidden" name="imgurl" id="imgurl">
					图片动画<select id="imgtx" style="width: 150px">
						<option value="flipx">上下翻转特效</option>
						<option value="flipy">左右翻转特效</option>
						<option value="fadedownbig">上下淡入特效</option>
						<option value="fadeleftbig">左右淡入特效</option>
						<option value="rotatein">旋转特效</option>
						<option value="flipy">左右翻转特效</option>
					</select></div>
				</div>
				<!--编辑动画-->
				<div class="edit-page-word-animation">
					图片出现延迟<select   id="imgyc" style="width: 150px">
						<option value="0">0秒</option>
						<option value="1">1秒</option>
						<option value="2">2秒</option>
						<option value="3">3秒</option>
					</select>
				</div>
				<div class="edit-word-save-btn"  onclick="addtext()">确定</div>
			</div>
		</div>

		<!--编辑音乐-->
		<div class="edit-music-page hide" id="music">
			<div class="close-edit-music-page-hide-btn"></div>
			<audio class="hide"></audio>
			<div class="close-edit-music-page edit-page-icon"
				onclick="delmusic()"></div>
			<!--按钮-->
			<div class="edit-music-switch-btn-border">
				<div class="edit-music-system-music-list-btn select">系统音乐</div>
				<div class="edit-music-user-music-list-btn">我的音乐</div>
			</div>
			<div class="edit-music-system-music-list select">
				<div class="edit-music-system-class">
					<!--<div class="btn">自定义</div>-->
					<div class="loading-icon edit-page-icon"></div>
					<div class="btn select">中国风</div>
					<div class="btn">动感</div>
					<div class="btn">宏大</div>
					<div class="btn">忧伤</div>
					<div class="btn">轻快</div>
					<div class="btn">浪漫</div>
					<div class="btn">经典</div>
					<div class="btn">舒缓</div>
					<div class="btn">趣味</div>
				</div>
				<div class="music-list">
					<div class="inner-music-list show cat-0">
						<div class="loading-icon edit-page-icon"></div>
					</div>
				</div>
			</div>
			<div class="edit-music-user-music-list">
				<div class="update-music edit-page-icon"></div>
				<div class="music-list loading">
					<input type="file" accept=".mp3"
						class="edit-music-user-file-up hide">
				</div>
			</div>
			<div class="edit-music-make-sure">确定</div>
		</div>

		<!--个人设置-->
		<div class="edit-setting-page hide" id="nr">
			<div class="close-edit-setting-page-hide-btn"></div>
			<div class="close-edit-setting-page edit-page-icon"  onclick="delnr()"></div>
			<div class="edit-setting-basic">
				<!--编辑头像-->
				<div class="crop-img-border">
					<div class="virtual-input-file-btn edit-page-icon"></div>
					<input type="button" class="cropit-image-input hide" accept="image/*">
					<div class="cropit-image-preview"
						style="background-position: 0px 0px; background-repeat: no-repeat no-repeat;">
						<#list  list as m>
						<img class="default-thumbnail" src="${ctx}${(m.picurl)!}">
						</#list>
					</div>
					
				</div>
				<!--标题-->
				<div class="edit-setting-title top">
				<#list  list as m>
					<input type="text" name="mbmc" id="mbmc" value="${(m.mbmc)!}"  placeholder="模板名称" style="width:183px;height:30px">
					</#list>
				</div>
				<!--描述-->
				<div class="edit-description">
					<textarea maxlength="40" placeholder="描述"></textarea>
					<span class="count">40</span>
				</div>
					<div  style=" width: 100%;  
					border-radius: 4px;  float: left;  position: relative;  margin-top: 34px;">
				是否可以编辑<select name="bjzt" id="bjzt"  placeholder="模板名称" >
                                    <option value="1" selected>是</option>
                                    <option value="0">否</option>
                                </select>
                                </div>
			</div>
			    
			<div class="edit-setting-make-sure" style="margin-top:80px">确定</div>
		</div>

	</div>
	<div class="preview-page">
		<div class="preview-page-phone">
			<div class="preview-page-title"></div>
			<div class="preview-page-frame-border">
				<iframe width="320" height="504" style="border: none"></iframe>
			</div>
		</div>
		<div class="preview-page-pre-page edit-page-icon"></div>
		<div class="preview-page-next-page edit-page-icon"></div>
		<div class="preview-page-back-btn">返回</div>


	</div>
	<form id="forms">
		<input type="hidden" name="lbid" id="lbid" value="${(lbid)!}"> 
		<input type="hidden" name="id" id="id"> 
		<input type="hidden" name="mbbh" id="mbbh">
		<input type="hidden" name="style" id="stylea"> 
		<input type="hidden" name="nr"  id="nrs">
		<input type="hidden" name="type" id="type"> 
		<input type="hidden" name="url" id="url">
		<input type="hidden" name="color" id="color">
		<input type="hidden" name="tx" id="tx">
		<input type="hidden" name="yc" id="yc">
	</form>

	<script src="${ctx}/cy/js/jquery-2.1.1.min.js"></script>
	<script src='${ctx}/static/easyui/1.3.2/jquery.easyui.min.js'
	type='text/javascript'></script>
	<script src="${ctx}/static/assets/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	</script>
	<script type="text/javascript">
	$(".colorpick-btn").click(function(e){
		 var co = $(e.target).attr('data-color'); 
		  $(".colorpick-btn").removeClass("selected");
		  $(e.target).attr("class",'colorpick-btn selected'); 
		  $(".btn-colorpicker").css({"background-color":co});
		  var id=$("#id").val();
		  if(id!=""){
				$("#span"+id).css({"color":co});
				$("#imgspan").css({"color":co});
		  }
		  $("#color").attr("value",co);
	});
		var num = 0;
		<#if sxlist??>
		num=${(sxlist?size)};
		</#if> 
		var type = "";
		var querySelector = document.querySelector.bind(document);
		function addpage() {
			var addPageSettingPage = querySelector(".edit-page-add-page-setting-page");
			addPageSettingPage.classList.remove("hide");
		}
		function delpage() {
			var addPageSettingPage = querySelector(".edit-page-add-page-setting-page");
			addPageSettingPage.classList.add("hide");
		}

		function makeSureBtn() {
			if (type == "") {
				alert("请选择页面！");
				return;
			}
			num = num + 1;
			changeli(type)
		}
		function changeli(type) {
			$(".thumbnail-page-list .page-list").removeClass("select");
			var text = '';
			var url = "";
			if (type == "1") {
				url = "11.jpg";
			} else if (type == "2") {
				url = "21.jpg";
			} else if (type == "3") {
				url = "31.jpg";
			} else if (type == "4") {
				url = "41.jpg";
			} else if (type == "5") {
				url = "51.jpg";
			}	 
			changess(type);
			$("#type").attr("value", "img");
			$("#mbbh").attr("value", type);
			$("#url").attr("value", "/cy/img/" + url);
			 $("#id").attr("value","");
			$('#forms').form('submit', {
				url :  '${ctx}/mb/savembsx/',
				onSubmit : function() {
				},
				success : function(data) {
					$("#bs").attr("value",data);
					//添加内容
					var imgli = '<li class="page-list show select" id='
							+ "li"+ data+ '  style="cursor: pointer;"  onclick="seleli(this,'+data+')">'
							+ '<div class="thumbnail-page-list-item-num edit-page-icon">'
							+ '<span>'+ num+ '</span></div>'
							+ '<div class="delete-btn edit-page-icon" style="cursor: pointer;"  onclick="delli('+data+')"></div>'
							+ '<div class="page animation-prepare"'
							+ 'style="pointer-events: none; position: relative; width: 320px; height: 504px;'
							+ 'background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;">';
							var textvlew = '<span id='+ "span"+ data+ ' class="layout-component-from-data" '
								+ 'style="line-height: 27px; font-size: 27px; '
								+ 'text-align: center; width: 320px;white-space: nowrap; '
								+ ' opacity: 1; z-index: 2;'
								+ 'position: absolute; left: 0px; top: 100px; height: 100px;"></br>朋友圈</span>';
								var img = '<img  id='+ "imgs"+ data+ '   src="${ctx}/cy/img/'+url+'" style="position: absolute;height:100%; width: 320px; left: 0px; top: 0px;"></li>';
					// 回填页面
					if (data != "0") {
						alert("添加成功！");
						$("#id").attr("value",data);
					}
					$("#bs").attr("value",data);
					$("#imgui").append(imgli+textvlew + img);
					$("#viewimg").attr("src", "${ctx}/cy/img/" + url);
					changexx(data,type);
				}
			});

		

		}
		function template(obj, i) {
			$(".template-item-border   .template-thumbnail").removeClass(
					"select");
			$(obj).addClass("select");
			type = i;
		}
		function viewpage() {
			var url="${ctx}/mb/getview?id=${(lbid)!}";
			window.open(url,'newwindow','height=600,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
		}

		function delli(id) {
			$('#forms').form('submit', {
				url :  '${ctx}/mb/deletembsx?id='+id,
				onSubmit : function() {
				},
				success : function(data) {
					// 回填页面
					if (data == "1") {
						alert("删除成功！");
						//删除节点
						$("#li"+id).remove();
						//删除图片
                		$("#viewimg").attr("src", "");
						//清空所有form
               			$("lbid").attr("value",""); 
               			$("id").attr("value","");
               			$("mbbh").attr("value","");
               			$("style").attr("value","");
               			$("type").attr("value","");
               			$("nr").attr("value","");
               			$("url").attr("value","");
               			$("color").attr("value","");
               			$("tx").attr("value","");
               			$("yc").attr("value","");

					}
				
				}
			});
		}
		function seleli(obj,id) {
			$(".thumbnail-page-list .page-list").removeClass("select");
			$(obj).addClass("select");
			var mbbh="";
			var url="";
			if(id !=""){
		    $.getJSON('${ctx}/mb/getmb',{"id":id},function(data) {
		            for(var i=0;i<data.length;i++) {
		              mbbh=data[0].mbbh;
		              url=data[0].url;
//		                nr=   data[i].nr;
					changess(mbbh);
		  			$("#viewimg").attr("src", "${ctx}" + url);
		  			changexx("",mbbh);
					$("#bs").attr("value",data[0].id);
					$("#id").attr("value",data[0].id);
					$("#url").attr("value",data[0].url);
		            }
		        }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
		        }

		}
		function getpx(e) {
			/* 	var x = e.clientX;
				var y = e.clientY;
				alert(x);
				alert(y);
				alert($('#editview').offset().top);
				alert("X: " + (e.pageX - $('#editview').offset().left) + ", Y: "
						+ (e.pageY - $('#editview').offset().top)); */

		}
		function editwz() {

		}
		function selectmusic() {
			$("#music").removeClass("hide");
		}
		function delmusic() {
			$("#music").addClass("hide ");
		}
		function selectnr() {
			$("#nr").removeClass("hide");
		}

		function delnr() {
			$("#nr").addClass("hide");
		}
		function removeimgdiv() {
			$("#imgdiv").removeClass("top");
			$("#imgdiv").removeClass("slide-out");
		}
		function removetextdiv() {
			$("#textdiv").removeClass("top");
			$("#textdiv").removeClass("slide-out");
			$(".edit-page-add-page-btn").removeClass("hide");
		}
		function addimgdiv() {
			$("#imgdiv").addClass("top");
			$("#imgdiv").addClass("slide-out");
		}
		function addtextdiv() {
			var bs=$("#bs").val();
			$("#id").attr("value",bs);
			$(".edit-page-add-page-btn").addClass("hide");
			if(bs==""){
				return;
			} 
			if(type=="1"){
				$("#wbtext").addClass("hide");
			}else {
				$("#wbtext").removeClass("hide");
			}
			$(".edit-page-add-page-setting-page").addClass("hide");
			$("#textdiv").addClass("top");
			$("#textdiv").addClass("slide-out");
		}
		function addtext(){
			var color=$("#colorspan").css("background-color");
			rgb = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
			color= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 

			var nr=$("#nrtext").val();
			var yc=$("#imgyc").val();
			var tx=$("#imgtx").val();
			var stylea=$("#styles").val();
			var id=$("#id").val();
			$("#nrs").attr("value",nr);
			$("#yc").attr("value",$("#imgyc").val());
			$("#tx").attr("value",$("#imgtx").val());
			$("#color").attr("value",color);
			$("#stylea").attr("value",stylea);
			if(id==""){
				alert("请先选择模板！");
				return;
			}
			$('#forms').form('submit', {
				url :  '${ctx}/mb/updatembsx',
				onSubmit : function() {
				},
				success : function(data) {
					// 回填页面
					if (data != "0") {
						alert("更新成功！");
					}
				
				}
			});
		}
		function hex(x) { 
			return ("0" + parseInt(x).toString(16)).slice(-2); 
			} 
		function rgb(){
			
		}
		
		
		KindEditor.ready(function(K) {
	        var editor = K.editor({
	            cssPath : '${ctx}/static/kindeditor/plugins/code/prettify.css',
	            uploadJson : '${ctx}/upload/upload/',
	            fileManagerJson : '${ctx}/upload/manageImg',
	            allowFileManager : true
	        });
	        K('#image1').click(function() {
	            editor.loadPlugin('image', function() {
	                editor.plugin.imageDialog({
	                    showRemote : false,
	                    clickFn : function(url, title, width, height, border, align) {
	                    		$("#url").attr("value",url);
	                    		var id=$("#id").val();
	                    		$("#viewimg").attr("src", "${ctx}" + url);
	                    		$("#imgs"+id).attr("src", "${ctx}" + url);
	                            editor.hideDialog();
	                    }
	                });
	            });
	        });
	    });
 function changexx(data,types){
	 if (types == "1") {
			$("#imgs"+data).css({
				"height" : "100%",
				"top" : "0px"});
			$("#span"+data).css({
				"height" : "0",
				"top" : "0"});
			$("#imgspan").css({
				"height" : "0",
				"top" : "0","background-color": "white", "color":"black" });
			$("#imgspan").html("");
		
		} else if (types == "2") {
			$("#imgs"+data).css({
				"height" : "80%",
				"top" : "0px"});
			$("#span"+data).css({
				"height" : "100px",
				"top" : "400px","background-color": "white", "color":"black" });
			$("#imgspan").css({
				"height" : "100px",
				"top" : "400px","background-color": "white", "color":"black" });
			$("#span"+data).html("<br>朋友圈");
			$("#imgspan").html("<br>朋友圈");
		} else if (types == "3") {
			$("#imgs"+data).css({
				"height" : "100%",
				"top" : "0px" });
			$("#span"+data).css({
				"height" : "100px",
				"top" : "300px","background-color": "white", "color":"black" });
			$("#imgspan").css({
				"height" : "100px",
				"top" : "300px","background-color": "white", "color":"black" });
			$("#span"+data).html("<br>朋友圈");
			$("#imgspan").html("<br>朋友圈");
		} else if (types == "4") {
			$("#imgs"+data).css({
				"height" : "80%",
				"top" : "20%"});
			$("#span"+data).css({
				"height" : "100px",
				"top" : "0","background-color": "white", "color":"black" });
			$("#imgspan").css({
				"height" : "100px",
				"top" : "0","background-color": "white", "color":"black" });
			$("#span"+data).html("<br>朋友圈");
			$("#imgspan").html("<br>朋友圈<p>在乎你的感受</p>");
		} else if (types == "5") {
			$("#imgs"+data).css({
				"height" : "100%",
				"top" : "0px"});
			$("#span"+data).css({
				"height" : "100px",
				"top" : "300px","background-color": "", "color":"white" });
			$("#imgspan").css({
				"height" : "100px",
				"top" : "300px","background-color": "", "color":"white" });
			$("#span"+data).html("</br>每一页都美若人生初见");
			$("#imgspan").html("</br>每一页都美若人生初见");
		}  
 }
 function changess(types){
	 if (types == "1") {
			$("#viewimg").css({
				"position" : "absolute",
				"height" : "100%",
				"width" : "320px",
				"left" : "0px",
				"top" : "0px"
			});
		} else if (types == "2") {
			$("#viewimg").css({
				"position" : "absolute",
				"height" : "80%",
				"width" : "320px",
				"left" : "0px",
				"top" : "0px"
			});
		} else if (types == "3") {
			$("#viewimg").css({
				"position" : "absolute",
				"height" : "100%",
				"width" : "320px",
				"left" : "0px",
				"top" : "0px"
			});
		} else if (types == "4") {
			$("#viewimg").css({
				"position" : "absolute",
				"height" : "80%",
				"width" : "320px",
				"left" : "0px",
				"top" : "20%"
			});
		} else if (types == "5") {
			$("#viewimg").css({
				"position" : "absolute",
				"height" : "100%",
				"width" : "320px",
				"left" : "0px",
				"top" : "0px"
			});
		} 
 }
 
 function changetext(){
		var text =$("#nrtext").val();
		var id=$("#id").val();
		$("#span"+id).html("</br>"+text);
		$("#imgspan").html("</br>"+text);
	}
 
 function changetextpx(){
	 var id=$("#id").val();
	 var styles=$("#styles").val();
	 $("#span"+id).css({"font-size":styles+"px"});
	 $("#imgspan").css({"font-size":styles+"px"});
		
 }
	</script>

</body>
</html></@layout>